<template>
  <el-dialog v-model="visible" title="设置有权人员" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-form-item label="领导" v-if="taskleader">
        <el-checkbox @change="handleCheckAllChange1" v-model="allStufs1">全选</el-checkbox>
        <el-checkbox-group v-model="dataForm.shereIdList1">
          <el-checkbox v-for="leader in taskleader" :key="leader.userId" :label="leader.userId" :value="leader.userId">
            {{ leader.remark }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="项目经理" v-if="tskWork">
        <el-checkbox @change="handleCheckAllChange2" v-model="allStufs2">全选</el-checkbox>
        <el-checkbox-group v-model="dataForm.shereIdList2">
          <el-checkbox v-for="leader in tskWork" :key="leader.userId" :label="leader.userId" :value="leader.userId">
            {{ leader.remark }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="组长" v-if="tsgroup">
        <el-checkbox @change="handleCheckAllChange3" v-model="allStufs3">全选</el-checkbox>
        <el-checkbox-group v-model="dataForm.shereIdList3">
          <el-checkbox v-for="leader in tsgroup" :key="leader.userId" :label="leader.userId" :value="leader.userId">
            {{ leader.remark }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="数据组" v-if="tsdata">
        <el-checkbox @change="handleCheckAllChange4" v-model="allStufs4">全选</el-checkbox>
        <el-checkbox-group v-model="dataForm.shereIdList4">
          <el-checkbox v-for="leader in tsdata" :key="leader.userId" :label="leader.userId" :value="leader.userId">
            {{ leader.remark }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="工作人员" v-if="tspersonnel" v-model="allStufs5">
        <el-checkbox @change="handleCheckAllChange5" v-model="allStufs5">全选</el-checkbox>
        <el-checkbox-group v-model="dataForm.shereIdList5">
          <el-checkbox v-for="leader in tspersonnel" :key="leader.userId" :label="leader.userId" :value="leader.userId">
            {{ leader.remark }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="业务员" v-if="tasksalesman">
        <el-checkbox @change="handleCheckAllChange6" v-model="allStufs6">全选</el-checkbox>
        <el-checkbox-group v-model="dataForm.shereIdList6">
          <el-checkbox v-for="leader in tasksalesman" :key="leader.userId" :label="leader.userId"
            :value="leader.userId">
            {{ leader.remark }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

    </el-form>
    <template v-slot:footer>
      <el-button @click="close()">关闭</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
  id: null as any,
  dfvName: "",
  dfvIfPublic: 0,
  dfvSource: "",
  shereIdList: [] as string[],
  shereIdList1: [] as string[],
  shereIdList2: [] as string[],
  shereIdList3: [] as string[],
  shereIdList4: [] as string[],
  shereIdList5: [] as string[],
  shereIdList6: [] as string[],
});


//监听全选控制
const allStufs1 = ref(false); // 全选
const allStufs2 = ref(false); // 全选
const allStufs3 = ref(false); // 全选
const allStufs4 = ref(false); // 全选
const allStufs5 = ref(false); // 全选
const allStufs6 = ref(false); // 全选

watch(() => dataForm.shereIdList1, (newName, oldName) => {
  if (taskleader.value != null) {
    allStufs1.value = newName.length === taskleader.value.length;
  }
});
watch(() => dataForm.shereIdList2, (newName, oldName) => {
  if (tskWork.value != null) {
    allStufs2.value = newName.length === tskWork.value.length;
  }
});
watch(() => dataForm.shereIdList3, (newName, oldName) => {
  if (tsgroup.value != null) {
    allStufs3.value = newName.length === tsgroup.value.length;
  }
});
watch(() => dataForm.shereIdList4, (newName, oldName) => {
  if (tsdata.value != null) {
    allStufs4.value = newName.length === tsdata.value.length;
  }
});
watch(() => dataForm.shereIdList5, (newName, oldName) => {
  if (tspersonnel.value != null) {
    allStufs5.value = newName.length === tspersonnel.value.length;
  }
});
watch(() => dataForm.shereIdList6, (newName, oldName) => {
  if (tasksalesman.value != null) {
    allStufs6.value = newName.length === tasksalesman.value.length;
  }
});

const init = (id?: number) => {
  visible.value = true;
  dataForm.id = id;
  shareList();
};

//关闭
const close = () => {
  visible.value = false;
  dataForm.shereIdList = [];
  dataForm.shereIdList1 = [];
  dataForm.shereIdList2 = [];
  dataForm.shereIdList3 = [];
  dataForm.shereIdList4 = [];
  dataForm.shereIdList5 = [];
  dataForm.shereIdList6 = [];
}

//领导
const taskleader = ref();
//业务员
const tasksalesman = ref();
//项目经理
const tskWork = ref();
const isListVisible = ref(false);
//工作人员
const tspersonnel = ref();
//组长
const tsgroup = ref();
//数据组
const tsdata = ref();

// 获取信息
const getInfo = (id: number) => {
  baseService.get("/crm/crmexhibition/" + id).then((res) => {
    let data = res.data;
    let owner = res.data.exhOwner;
    //领导
    dataForm.shereIdList1 = setOwner(taskleader.value, owner);
    //项目经理
    dataForm.shereIdList2 = setOwner(tskWork.value, owner);
    //组长
    dataForm.shereIdList3 = setOwner(tsgroup.value, owner);
    //数据组
    dataForm.shereIdList4 = setOwner(tsdata.value, owner);
    //工作人员
    dataForm.shereIdList5 = setOwner(tspersonnel.value, owner);
    //业务员
    dataForm.shereIdList6 = setOwner(tasksalesman.value, owner);
  });
};

/**
 * 人员回显
 * @param userList
 * @param ownerStr
 */
const setOwner = (userList: [{ userId: null }], ownerStr: string) => {
  if (!ownerStr) {
    return [];
  }
  let ownerArr: string[] = ownerStr.split(",");
  if (ownerArr.length == 0 || userList == null) {
    return [];
  }
  //判断ownerArr是否存在于userList数组中，不存在的移除
  for (let i = 0; i < ownerArr.length; i++) {
    let isExist = false;
    for (let j = 0; j < userList.length; j++) {
      if (ownerArr[i] == userList[j].userId) {
        isExist = true;
        break;
      }
    }
    if (!isExist) {
      ownerArr.splice(i, 1);
      i--;
    }
  }
  return ownerArr;
};





//全选领导
const handleCheckAllChange1 = (val: boolean) => {
  dataForm.shereIdList1 = [];
  // 选中
  if (val) {
    for (let i = 0; i < taskleader.value.length; i++) {
      dataForm.shereIdList1.push(taskleader.value[i].userId);
    }
  } else {
    dataForm.shereIdList1 = [];
  }
}

//全选项目经理
const handleCheckAllChange2 = (val: boolean) => {
  dataForm.shereIdList2 = [];
  // 选中
  if (val) {
    for (let i = 0; i < tskWork.value.length; i++) {
      dataForm.shereIdList2.push(tskWork.value[i].userId);
    }
  } else {
    dataForm.shereIdList2 = [];
  }
}

//全选组长
const handleCheckAllChange3 = (val: boolean) => {
  dataForm.shereIdList3 = [];
  // 选中
  if (val) {
    for (let i = 0; i < tsgroup.value.length; i++) {
      dataForm.shereIdList3.push(tsgroup.value[i].userId);
    }
  } else {
    dataForm.shereIdList3 = [];
  }
}

//全选数据组
const handleCheckAllChange4 = (val: boolean) => {
  dataForm.shereIdList4 = [];
  // 选中
  if (val) {
    for (let i = 0; i < tsdata.value.length; i++) {
      dataForm.shereIdList4.push(tsdata.value[i].userId);
    }
  } else {
    dataForm.shereIdList4 = [];
  }
}

//全选工作人员
const handleCheckAllChange5 = (val: boolean) => {
  dataForm.shereIdList5 = [];
  // 选中
  if (val) {
    for (let i = 0; i < tspersonnel.value.length; i++) {
      dataForm.shereIdList5.push(tspersonnel.value[i].userId);
    }
  } else {
    dataForm.shereIdList5 = [];
  }
}

//全选工作人员
const handleCheckAllChange6 = (val: boolean) => {
  dataForm.shereIdList6 = [];
  // 选中
  if (val) {
    for (let i = 0; i < tasksalesman.value.length; i++) {
      dataForm.shereIdList6.push(tasksalesman.value[i].userId);
      console.log(dataForm.shereIdList6);

    }
  } else {
    dataForm.shereIdList6 = [];
  }
}


/**
* 获取工作人员和工作人员列表
*/
const shareList = () => {
  isListVisible.value = true;
  baseService.get("/sys/user/getExceptAdmin", {}).then((res) => {
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    taskleader.value = res.data[1];
    tasksalesman.value = res.data[2];
    tskWork.value = res.data[3];
    tspersonnel.value = res.data[4];
    tsgroup.value = res.data[6];
    tsdata.value = res.data[7];
    // 在这里添加判断逻辑
    taskleader.value = taskleader.value && taskleader.value.length > 0 ? taskleader.value : null;
    tasksalesman.value = tasksalesman.value && tasksalesman.value.length > 0 ? tasksalesman.value : null;
    tskWork.value = tskWork.value && tskWork.value.length > 0 ? tskWork.value : null;
    tspersonnel.value = tspersonnel.value && tspersonnel.value.length > 0 ? tspersonnel.value : null;
    tsgroup.value = tsgroup.value && tsgroup.value.length > 0 ? tsgroup.value : null;
    tsdata.value = tsdata.value && tsdata.value.length > 0 ? tsdata.value : null;

    if (dataForm.id != null) {
      getInfo(dataForm.id);
    }
  });
}

// 表单提交
const dataFormSubmitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    dataForm.shereIdList = Array.from(new Set([
      ...dataForm.shereIdList1,
      ...dataForm.shereIdList2,
      ...dataForm.shereIdList3,
      ...dataForm.shereIdList4,
      ...dataForm.shereIdList5,
      ...dataForm.shereIdList6
    ]));

    baseService.post("/crm/crmexhibition/setUser", { shereIdList: dataForm.shereIdList, ids: [dataForm.id] }).then((res) => {
      ElMessage.success({
        message: t("prompt.success"),
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  });
};


defineExpose({
  init

});
</script>
<style lang="scss" scoped>
.el-checkbox {
  width: 82px;
}

.el-checkbox-group {
  width: 800px;
}
</style>
